<template>
    <div id="selectedJob">
        <h1 class="title">精选职位</h1>
        <div class="job-section">
            <el-card v-for="job in Jobs" :key="job.positionId" class="job-card" @click.native="handleClick(job)">

                <div class="job-content">
                    <div class="job-title-salary">
                        <span class="job-title">{{ job.positionName }}</span>
                        <span class="job-salary">{{ job.lowestSalaryMonth }} - {{ job.highestSalaryMonth }} </span>
                    </div>
                    <div class="job-tags" style="text-align: left;">
                        <span><i class="el-icon-time"></i> {{ job.positionType }}</span>
                    </div>
                    <div class="job-meta">
                        <span> <i class="el-icon-office-building"></i>{{ job.companyName }}</span>
                        <span class="job-location">{{ job.location }}</span>
                    </div>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script>
import { searchInput } from '@/util/seeker_api/search_api'
import { mapState } from 'vuex';
export default {
    data() {
        return {
            Jobs: [],
            hasMoreJobs: true,
            loading: false,
        }
    },
    created() {
        this.loadData()
    },
    methods: {
        async loadData() {
            const data = {
                location: this.address,
                content: ''
            };
            const res = await searchInput(data);
            this.Jobs = res.data.jobRespList;
        },
        handleClick(job) {
            this.$router.push({
                name: 'job',
                query: {
                    job: job
                }
            })
        }

    },
    computed: {
        ...mapState({
            address: state => state.seeker.address,
        })
    },
    watch: {
        address: {
            handler(newAddress) {
                this.loadData();
            },
            immediate: true
        }
    }
}
</script>

<style scoped>
/* 外层容器：设置Flex布局，控制卡片排列 */
.job-section {
    /* 使用Flex布局 */
    display: flex;
    /* 允许换行 */
    flex-wrap: wrap;
    /* 卡片之间的间距（水平和垂直方向） */
    gap: 25px;
    /* 可选：容器内部左右留出边距，避免边缘卡片贴边 */
    padding: 0 10px;
    /* 可选：清除容器默认间距 */
    margin: 0;
}

/* 岗位卡片：控制宽度，确保一行3个 */
.job-card {
    width: 330px;
    /* 3个卡片 + 2个gap（共20*2=40px），每个卡片分摊40px/3≈13.33px */
    /* 取消卡片默认边框（可选，根据需求保留） */
    border: none;
    /* 可选：添加卡片阴影，增强立体感 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    /* 可选：卡片内部padding，让内容不贴边 */
    padding: 15px;
    /* 避免卡片被压缩 */
    flex-shrink: 0;
}

.job-card:hover {
  box-shadow: 0px 2px 5px 3px rgba(0, 0, 0, 0.1);

}

.active-job {
  border: 2px solid #026e62 !important;

}

.job-content {}


.job-title-salary {
  align-items: baseline;
  margin-bottom: 15px;
  display: flex;
  /* 开启 Flex 布局 */
  justify-content: space-between;
}

.job-title {
  font-size: 16px;
  margin-top: auto;
}

.job-salary {
  font-size: 18px;
  color: red;
}

.job-tags {
  margin-bottom: 15px;
}

.job-tags>span {
  width: 100%;
  margin-left: auto;
  font-size: 14px;
  background: #f3f5f7;
  padding: 5px;
  border-radius: 5px;
}

.job-meta {
  display: flex;
  /* 开启 Flex 布局 */
  justify-content: space-between;
}

.job-location {
  font-size: 14px;
  padding-left: 20%;
}
</style>